<div class="mod-rank" style="height: 303px;">
    <!-- 等级信息  -->
    <div class="rank-info">
        <ul>
            <li>
                <p>QQ等级升级还需</p>
                <p><span class="f-day day">68</span>天</p>
            </li>
            <li>
                <p>QQ等级加速</p>
                <p><span class="s-day day">1.0</span>倍</p>
            </li>
        </ul>
    </div>
    <!--
         初始位置:data-index
      -->
    <div class="vip-icon-list" data-index="0" style="opacity: 1;">
        <!-- 细线 -->
        <div class="line" style="width: 1402px; height: 1402px; left: -727px;">
        </div>

        <!-- 用户头像 -->
        <div class="user-avatar" id="avatar">
            <div class="pop-info" style="transition: all 0.5s cubic-bezier(0.36, 0.64, 0.36, 0.64) 0.9s; transform: translate3d(0px, -3px, 0px);">
                <!-- 付费模块  -->
                <div class="pop-info-cnt" style="transition: all 0.5s linear 0.9s; transform: translate3d(39px, 0px, 0px);">

                    <!-- 开通会员 -->
                    <div class="pop-box-cnt ui-center scale">
                        <span>开通</span>
                    </div>

                    <!--用户头像  -->
                    <div class="ui-avatar-s" style="opacity: 1;">
                  <span style="background-image:url(../pic/p1.png)">
                  </span>
                    </div>

                    <div class="pop-box" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
                    </div>

                </div>
            </div>
        </div>

        <!-- 头像模块 -->

        <!--
            用户等级data-rank
         -->
        <ul class="icon-list-vip" data-rank="0">
            <li data-day="68" data-speed="1.0" style="left: 14.811px; bottom: -51.01px;">
                <span class="icon-bg"><i class="ui-icon-qq"></i></span>
                <div class="circle1"></div>
                <div class="circle1"></div>
                <div class="circle1"></div>
                <p>QQ</p>
            </li>
            <li data-day="42" data-speed="1.9" class="animateZoom" style="left: 133.831px; bottom: -29.5075px;">
                <span class="icon-bg"><i class="ui-icon-vip"></i></span>
                <div class="circle2"></div>
                <div class="circle2"></div>
                <div class="circle2"></div>
                <p>VIP</p>
            </li>
            <li data-day="37" data-speed="2.2" style="left: 252.852px; bottom: 14.7156px;">
                <span class="icon-bg"><i class="ui-icon-svip"></i></span>
                <div class="circle3 c1"></div>
                <div class="circle3 c2"></div>
                <div class="circle3 c3"></div>
                <p>SVIP</p>
            </li>
            <li data-day="28" data-speed="3.0" style="left: 353.76px; bottom: 73.8267px;">
                <span class="icon-bg"><i class="ui-icon-yearsvip"></i></span>
                <div class="circle4"></div>
                <div class="circle4"></div>
                <div class="circle4"></div>
                <p>年SVIP</p>
            </li>
        </ul>
    </div>
</div>